<template>
  <a-card :bordered="false">
    <div v-if="!pd">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="项目状态">
                <a-select v-model="queryParam.state" placeholder="请选择">
                  <a-select-option v-for="(select, index) in states" :key="index">{{ select }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="项目名称">
                <a-input v-model="queryParam.projectName" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="!advanced && 8 || 16" :sm="24">
              <span class="table-page-search-submitButtons"
                    :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="$refs.addProject.add()">新建</a-button>
      </div>

      <s-table
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
      >
        <span slot="state" slot-scope="text">
          <a-tag :color="text | selectColorFilter">{{ text | selectTextFilter }}</a-tag>
        </span>
        <span slot="projectType" slot-scope="text">
          <a-tag>{{ text | selectType }}</a-tag>
        </span>
        <span slot="maxVote" slot-scope="text">
          <a-tag>{{ text | maxVote }}</a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">管理</a>
            <a-divider type="vertical" />
            <remove-project ref="removePoint" :projectId="String(record.projectId)" @ok="handleOk"/>
          <!--          <remove-point ref="removePoint" :pointIds="String(record.pointId)" @ok="handleOk"/>-->
          </template>
        </span>
      </s-table>
      <!--    <add-point ref="addPoint" :courses="courses" :points="points" @ok="handleOk" />-->
      <!--    <edit-point ref="editPoint" :courses="courses" @ok="handleOk"/>-->
      <add-project ref="addProject" @ok="handleOk"/>
    </div>
    <project-management ref="projectManagement" @backProject="receive" @ok="handleOk" v-else></project-management>
  </a-card>
</template>

<script>
  import moment from 'moment'
  import { STable } from '@/components'
  import { listAllProject } from '@/api/vote/project'
  import AddProject from '@/views/manage/modules/AddProject'
  import RemoveProject from '@/views/manage/modules/RemoveProject'
  import ProjectManagement from './modules/ProjectManagement'
  import { queryType } from '../../api/vote/project'
  // import { queryPoint, listPoint } from '@/api/basic/class'
  // import { listCourse } from '@/api/basic/course'
  // import AddPoint from './modules/class/AddClass'
  // import RemovePoint from './modules/class/RemoveClass'
  // import EditPoint from './modules/class/EditPoint'
  // 用于处理过滤器动态获取数据

  let that

  export default {
    name: 'PointList',
    components: {
      STable,
      AddProject,
      RemoveProject,
      ProjectManagement
    },
    data() {
      return {
        // 高级搜索 展开/关闭
        advanced: false,
        pd: false,
        // 查询参数
        queryParam: {},
        courses: [],
        points: [],
        states: ['未开始', '投票中', '已结束'],
        project: [],
        types: [],
        subjects: [],
        // 表头
        columns: [
          {
            title: '项目名称',
            dataIndex: 'projectName',
            align: 'center'
          },
          {
            title: '项目发起人',
            dataIndex: 'sponsor',
            align: 'center',
            sorter: true
          },
          {
            title: '项目类型',
            dataIndex: 'projectType',
            align: 'center',
            scopedSlots: { customRender: 'projectType' },
            sorter: true
          },
          {
            title: '限投数',
            dataIndex: 'maxVote',
            align: 'center',
            sorter: true
          },
          {
            title: '项目状态',
            dataIndex: 'state',
            align: 'center',
            scopedSlots: { customRender: 'state' },
            sorter: true
          },
          {
            title: '评审日期',
            dataIndex: 'date',
            align: 'center',
            customRender: (text) => moment(text).format('YYYY-MM-DD'),
            sorter: true
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          // 统一处理查询参数，便于后端表格DTO用固定参数接收
          const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
          return listAllProject(Object.assign(parameter, queryJson))
            .then(res => {
              console.log(res.result)
              return res.result
            })
        },
        selectedRowKeys: [],
        selectedRows: [],

        // custom table alert & rowSelection
        options: {
          alert: {
            show: true,
            clear: () => {
              this.selectedRowKeys = []
            }
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        },
        optionAlertShow: false
      }
    },
    filters: {
      selectTextFilter(val) {
        let name = ''
        if (val === 0) {
          name = '未开始'
        } else if (val === 1) {
          name = '投票中'
        } else {
          name = '已结束'
        }
        return name
      },
      selectType(val) {
        let name = ''
        if (val === 0) {
          name = '选择评价型'
        } else if (val === 1) {
          name = '同意反对型'
        }
        return name
      },
      maxVote(val) {
        let name = ''
        if (val === 0) {
          name = 'null'
        } else {
          name = val
        }
        return name
      },
      selectColorFilter(val) {
        let name = ''
        if (val === 0) {
          name = 'blue'
        } else if (val === 1) {
          name = 'green'
        } else {
          name = 'red'
        }
        return name
      }
    },
    beforeCreate() {
      that = this
    },
    created() {
      this.tableOption()
      // this.listType()
      // listCourse()
      //   .then(res => {
      //     if (res.message !== 'error') {
      //       this.courses = res.result
      //     } else {
      //       this.$message.error('操作失败！')
      //     }
      //   })
      // listPoint()
      //   .then(res => {
      //     if (res.message !== 'error') {
      //       this.points = res.result
      //     } else {
      //       this.$message.error('操作失败！')
      //     }
      //   })
    },
    methods: {
      tableOption() {
        if (!this.optionAlertShow) {
          this.options = {
            alert: {
              show: true,
              clear: () => {
                this.selectedRowKeys = []
              }
            },
            rowSelection: {
              selectedRowKeys: this.selectedRowKeys,
              onChange: this.onSelectChange
            }
          }
          this.optionAlertShow = true
        } else {
          this.options = {
            alert: false,
            rowSelection: null
          }
          this.optionAlertShow = false
        }
      },
      listType() {
        this.$nextTick().then(function () {
          const queryJson = {
            'pageNo': 1,
            'pageSize': 10,
            'queryParam': JSON.stringify(that.queryParam)
          }
          queryType(queryJson).then(res => {
            that.types = res.result
          })
        })
      },
      handleEdit(record) {
        this.pd = true
        this.$nextTick(() => {
          console.log(this.$refs.projectManagement)
          this.$refs.projectManagement.edit(record)
        })
      },

      handleOk() {
        this.$refs.table.clearSelected()
        this.$refs.table.refresh(false)
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      toggleAdvanced() {
        this.advanced = !this.advanced
      },
      receive () {
        this.pd = false
      }
    }
  }
</script>
